<script setup lang="ts">
import { ref } from 'vue'
import pickerConfirm from './public/imgs/picker_confirm.png'
const props = defineProps<{
    show: boolean
    title?: string
    columns: Array<{ value: number; text: string }>
}>()

const emit = defineEmits<{
    (e: 'update:show', value: boolean): void
    (e: 'confirm', selectedValues: number[]): void
}>()

const pickerValue = ref<number[]>([])

const handleConfirm = ({ selectedValues }: { selectedValues: number[] }) => {
    emit('update:show', false)
    emit('confirm', selectedValues)
}
// v-model:show 实际上是 :show 和 @update:show 的语法糖
// 直接绑定到 prop 会导致试图修改 prop，这在 Vue 中是被禁止的
const showModel = computed({
  get: () => props.show,
  set: (val) => emit('update:show', val)
})
</script>

<template>
    <van-popup v-model:show="showModel" destroy-on-close round position="bottom">
        <van-picker :model-value="pickerValue" :columns="columns" :title="title || '请选择'" @confirm="handleConfirm"
            cancel-button-text=" " :option-height="60" :visible-option-num="5">
            <template #confirm>
                <img :src="pickerConfirm" alt="" class="w-18 h-10">
            </template>
        </van-picker>
    </van-popup>
</template>
<style lang="css" scoped>
::v-deep .van-picker__title {
    color: #fefffe !important;
}

::v-deep .van-picker {
    background-color: #222627 !important;
    color: #fefffe !important;
}

::v-deep .van-picker__toolbar {
    background-color: #222627 !important;
    color: #fefffe !important;
}

::v-deep .van-picker__columns {
    background-color: #222627 !important;
    height: 300px !important;
}

::v-deep .van-picker__mask {
    background-image:
        linear-gradient(to bottom, rgba(34, 38, 39, 0.9), rgba(34, 38, 39, 0.4)),
        linear-gradient(to top, rgba(34, 38, 39, 0.9), rgba(34, 38, 39, 0.4));
}

::v-deep .van-picker__frame {
    background-color: transparent;
}

::v-deep .van-picker-column__item {
    color: #fefffe !important;
}

::v-deep .van-picker-column__item--selected {
    color: #fefffe !important;
    font-weight: bold;
}

::v-deep .van-picker-column__item--selected {
    background: linear-gradient(to right,
            #232829 10%,
            #2a2f30 50%,
            #232829 90%);
    box-shadow: 0 0 8px rgba(58, 64, 66, 0.5);
}

::v-deep .van-picker__frame {
    height: 60px !important;
}

::v-deep .van-picker__frame::before,
::v-deep .van-picker__frame::after {
    display: none !important;
}
</style>